<!--
 * @Author: AuroCaffe 18509564594@163.com
 * @Date: 2025-05-15 15:34:13
 * @LastEditors: AuroCaffe 18509564594@163.com
 * @LastEditTime: 2025-08-07 19:54:39
 * @FilePath: \HuiLin\components\tabBar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<!-- 底部操作条：背景颜色、对应图标、字体颜色，可自定义 -->
	<view class="cu-bar tabbar bg-white foot" id="bottom-bar" :style="{height: barHeight +'px'}">
		<!-- 首页 -->
		<view class="action " :class="PageCur=='home'?'text-orange':'text-gray'" data-cur="home"
			@click="NavChange('/pages/tabBar/home')">
			<view class="cuIcon-homefill"></view> 首页
		</view>

		<!-- 购物车、右上角有数字角标 -->
		<view class="action" :class="PageCur=='cart'?'text-orange':'text-gray'" data-cur="cart"
			@click="NavChange('/pages/tabBar/cart')">
			<view class="cuIcon-cart">
				<!-- 数字角标 -->
				<view class="cu-tag badge" v-if="cartCount>0">{{cartCount>99?'99+':cartCount}}</view>
			</view>
			购物车
		</view>
		<view class="action add-action" :class="PageCur=='circle'?'text-orange':'text-gray'" data-cur="sub"
			@click="NavChange('/pages/tabBar/circle')">
			<button class="cu-btn cuIcon-friendfill bg-green shadow"></button>
			圈子
		</view>
		<!-- 消息 -->
		<view class="action " :class="PageCur=='msg'?'text-orange':'text-gray'" data-cur="home"
			@click="NavChange('/pages/tabBar/message')">
			<view class="cuIcon-message">
				<view class="cu-tag badge" v-if="totalUnreadCount>0">{{totalUnreadCount>99?'99+':totalUnreadCount}}
				</view>
			</view> 消息
		</view>

		<!-- 我的、左上角红色圆点 -->
		<view class="action" :class="PageCur=='mine'?'text-orange':'text-gray'" data-cur="mine"
			@click="NavChange('/pages/tabBar/mine')">
			<view class="cuIcon-my">
				<!-- 红色圆点（数字角标） -->
				<!-- <view class="cu-tag badge"></view> -->
			</view>
			我的
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex'
	export default {
		props: ['PageCur'],
		data() {
			return {
				barHeight: 0,
			};
		},
		mounted() {
			// 获取自身高度
			this.calculateBarHeight()
		},
		methods: {
			NavChange(route) {
				// 使用智能导航，优先使用switchTab，避免断开WebSocket连接
				// 如果当前页面栈深度过大，则使用redirectTo清空栈
				const stackDepth = this.$router.getStackDepth();
				if (stackDepth >= 4) {
					// 栈深度较大时，使用redirectTo清空栈
					this.$router.smartNavigate(route, 'redirectTo');
				} else {
					// 正常情况使用switchTab
					this.$router.smartNavigate(route, 'redirectTo');
				}
			},
			calculateBarHeight() {
				const query = uni.createSelectorQuery().in(this)
				query.select('#bottom-bar').boundingClientRect(data => {
					if (data) {
						this.barHeight = data.height
						this.$emit('height-change', data.height) // 通知父组件高度变化
					}
				}).exec()
			},
		},
		computed: {
			...mapGetters(['totalUnreadCount']),
			...mapState(['count', 'chatUnreadCount', 'cartCount'])

		}
	}
</script>

<style lang="scss" scoped>
	.cu-bar {
		padding: 20rpx 0;
	}

	.cu-bar.tabbar .action {
		font-size: 28rpx;
	}
</style>